<script setup>
const props = defineProps({
  mHeight: {
    type: String,
    default: '100%', // 默认高度
  },
});

// 动态注入全局样式
const injectGlobalStyles = () => {
  const style = document.createElement('style');
  style.textContent = `
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body, html {
      height: 100%;
      font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
      overflow-y: hidden; /* 禁用外层滚动条 */
    }
  `;
  document.head.appendChild(style);
};

// 调用函数注入全局样式
injectGlobalStyles();
</script>

<template>
  <div
      class="bg-tech-blue"
      :style="{ minHeight: mHeight }"
  >
    <slot></slot>
  </div>
</template>

<style scoped>
/* 组件样式 */
.bg-tech-blue {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) fixed;
  width: 100%;
  height: 100vh; /* 固定高度为视口高度 */
  min-height: 100vh; /* 确保最小高度为视口高度 */
  color: white;
  position: relative;
  overflow-y: auto; /* 允许内容超出时滚动 */
}

/* 美化滚动条 */
.bg-tech-blue::-webkit-scrollbar {
  width: 10px; /* 滚动条宽度 */
}

.bg-tech-blue::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1); /* 滚动条轨道背景 */
  border-radius: 5px; /* 圆角 */
}

.bg-tech-blue::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3); /* 滚动条滑块颜色 */
  border-radius: 5px; /* 圆角 */
  transition: background 0.3s ease; /* 添加过渡效果 */
}

.bg-tech-blue::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5); /* 鼠标悬停时滑块颜色 */
}
</style>